{% extends "base.html" %}
{% block content %}
    <div class="section section-hero" id="home" style="background-image: url('{{ url_for('views.themes', path='img/bg.jpg') }}'); background-position: 10% 50%">
        <div class="section-inner">
            <div class="table-container-outer container">
                <div class="table-container-inner">
                    <div data-0="transform[swing]:translateY(0px);opacity[swing]:1" data-250="transform[swing]:translateY(-50px);opacity[swing]:0">
                    {% if get_ctf_logo() %}
                        <img class="img-responsive ctf_logo" src="{{ url_for('views.files', path=get_ctf_logo()) }}" height="150px" width="150px" alt="{{ get_ctf_name() }}">
                    </div>
                    {% else %}    
                        <img class="img-responsive ctf_logo" src="{{ url_for('views.themes', path='img/favicon.ico') }}" height="150px" width="150px" alt="{{ get_ctf_name() }}">
                    {% endif %}
                    <h1 class="hero-header" data-150="transform[swing]:translateX(0px);opacity[swing]:1" data-550="transform[swing]:translateX(-25px);opacity[swing]:0">D0g3 <strong class="main-color">Lab</strong></h1>
                    <h2 class="hero-subheader" data-200="transform[swing]:translateX(0px);opacity[swing]:1" data-500="transform[swing]:translateX(25px);opacity[swing]:0">CTF <strong class="main-color">Online</strong></h2>
                    <div data-250="transform[swing]:translateY(0px);opacity[swing]:1" data-550="transform[swing]:translateY(-15px);opacity[swing]:0">
                        <div class="divider">//</div>
                    </div>
                    <div data-350="transform[swing]:translateY(0px);opacity[swing]:1" data-650="transform[swing]:translateY(-15px);opacity[swing]:0">
                        <p class="lead">道之若极，行必有格</p>
                        <p class="lead">收集各类自创/大型CTF比赛赛题，提供容器化专属题目环境，供广大CTF爱好者学习。</p>
                        <p class="lead">如有侵权，或题目问题请电联<a href="mailto:bot@d0g3.cn">bot@d0g3.cn</a></p>
                    </div>
                    <div>
                        <p>
                            
                        </p>
                    </div>
                    <p> &copy; 2019 <a href="https://www.d0g3.cn">D0g3</a> | Power By <a href="https://ctfd.io/" title="Jakub Kwarciński - Frontend Developer">CTFD</a></p>
                </div>
            </div>
            <div class="scroll-icon visible-lg" data-600="opacity[swing]:1" data-850="opacity[swing]:0">
                <span class="icon icon-basic-magic-mouse"></span>
            </div>

        </div>
        <div id="to-top" class="to-top">
            <a href="#" class="To the top" title="To the top">
                <i class="fa fa-angle-up"></i>
            </a>
        </div>
    </div>
    <div class="section section-standard section-single-page section-typography" id="home">
        <div class="section-inner">
            <div class="container">
                <div class="section-header">
                    <h3>Typography</h3>
                    <div class="divider">//</div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="standard-box">
                            <div class="standard-header">
                                <h3>Headings</h3>
                            </div>
                            <h1>h1. Bootstrap heading</h1>
                            <h2>h2. Bootstrap heading</h2>
                            <h3>h3. Bootstrap heading</h3>
                            <h4>h4. Bootstrap heading</h4>
                            <h5>h5. Bootstrap heading</h5>
                            <h6>h6. Bootstrap heading</h6>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="standard-box">
                            <div class="standard-header">
                                <h3>Paragraphs</h3>
                            </div>
                            <h4>Lead</h4>
                            <p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
                            <h4>Normal</h4>
                            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>
                            <h4>Emphasis</h4>
                            <p><em>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</em></p>
                            <h4>Small</h4>
                            <p class="no-margin"><small>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</small></p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="standard-box">
                            <div class="standard-header">
                                <h3>Blockquotes</h3>
                            </div>
                            <blockquote>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                            </blockquote>
                            <blockquote>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
                            </blockquote>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="standard-box">
                            <div class="standard-header">
                                <h3>Unordered List Stylish</h3>
                            </div>
                            <ul class="list no-margin">
                                <li>Lorem ipsum dolor sit amet</li>
                                <li>Consectetur adipiscing elit</li>
                                <li>Integer molestie lorem at massa</li>
                                <li>Facilisis in pretium nisl aliquet</li>
                                <li>Nulla volutpat aliquam velit
                                <ul>
                                    <li>Phasellus iaculis neque</li>
                                    <li>Purus sodales ultricies</li>
                                    <li>Vestibulum laoreet porttitor sem</li>
                                    <li>Ac tristique libero volutpat at</li>
                                </ul>
                                </li>
                                <li>Faucibus porta lacus fringilla vel</li>
                                <li>Aenean sit amet erat nunc</li>
                                <li>Eget porttitor lorem</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="standard-box">
                            <div class="standard-header">
                                <h3>Images</h3>
                            </div>
                            <img class="img-rounded" alt="Office" src="img/blog-photo-1.jpg" style="width: 140px; height: 140px; margin:10px;">
                            <img class="img-circle" alt="Office" src="img/blog-photo-1.jpg" style="width: 140px; height: 140px; margin:10px;">
                            <img class="img-thumbnail" alt="Office" src="img/blog-photo-1.jpg" style="width: 140px; height: 140px; margin:10px;">
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="standard-box">
                            <div class="standard-header">
                                <h3>Labels</h3>
                            </div>
                            <span class="label label-default">Default</span>
                            <span class="label label-primary">Primary</span>
                            <span class="label label-success">Success</span>
                            <span class="label label-info">Info</span>
                            <span class="label label-warning">Warning</span>
                            <span class="label label-danger">Danger</span>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <div class="standard-box">
                            <div class="standard-header">
                                <h3>Thumbnail</h3>
                            </div>
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="thumbnail no-margin">
                                        <img class="img-responsive" src="img/blog-photo-1.jpg" alt="Thumbnail">
                                        <div class="caption">
                                            <h3>Thumbnail label</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem quam, adipiscing condimentum tristique vel, eleifend sed turpis. Pellentesque cursus arcu id magna euismod in elementum purus molestie.</p>
                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <a href="#" class="btn btn-block btn-primary" role="button">Button</a>
                                                </div>
                                                <div class="col-xs-6">
                                                    <a href="#" class="btn btn-block btn-default" role="button">Button</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="thumbnail no-margin">
                                        <img class="img-responsive" src="img/blog-photo-2.jpg" alt="Thumbnail">
                                        <div class="caption">
                                            <h3>Thumbnail label</h3>
                                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem quam, adipiscing condimentum tristique vel, eleifend sed turpis. Pellentesque cursus arcu id magna euismod in elementum purus molestie.</p>
                                            <div class="row">
                                                <div class="col-xs-6">
                                                    <a href="#" class="btn btn-block btn-primary" role="button">Button</a>
                                                </div>
                                                <div class="col-xs-6">
                                                    <a href="#" class="btn btn-block btn-default" role="button">Button</a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6">
                        <div class="standard-box">
                            <div class="standard-header">
                                <h3>Progress bars</h3>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                                    <div class="progress-bar-indicator-outer">
                                        <div class="progress-bar-indicator-inner">40%</div>
                                    </div>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%">
                                    <div class="progress-bar-indicator-outer">
                                        <div class="progress-bar-indicator-inner">20%</div>
                                    </div>
                                </div>
                            </div>
                            <div class="progress">
                                <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%">
                                    <div class="progress-bar-indicator-outer">
                                        <div class="progress-bar-indicator-inner">60%</div>
                                    </div>
                                </div>
                            </div>
                            <div class="progress no-margin">
                                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%">
                                    <div class="progress-bar-indicator-outer">
                                        <div class="progress-bar-indicator-inner">80%</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="standard-box">
                    <div class="standard-header">
                        <h3>Buttons</h3>
                    </div>
                    <p>
                        <button type="button" class="btn btn-default">Default</button>
                        <button type="button" class="btn btn-primary">Primary</button>
                        <button type="button" class="btn btn-success">Success</button>
                        <button type="button" class="btn btn-info">Info</button>
                        <button type="button" class="btn btn-warning">Warning</button>
                        <button type="button" class="btn btn-danger">Danger</button>
                        <button type="button" class="btn btn-link">Link</button>
                    </p>
                    <h3>Sizes</h3>
                    <p>
                        <button type="button" class="btn btn-primary btn-lg">Large button</button>
                        <button type="button" class="btn btn-default btn-lg">Large button</button>
                    </p>
                    <p>
                        <button type="button" class="btn btn-primary">Default button</button>
                        <button type="button" class="btn btn-default">Default button</button>
                    </p>
                    <p>
                        <button type="button" class="btn btn-primary btn-sm">Small button</button>
                        <button type="button" class="btn btn-default btn-sm">Small button</button>
                    </p>
                    <p>
                        <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
                        <button type="button" class="btn btn-default btn-xs">Extra small button</button>
                    </p>
                </div>
                <div class="standard-box">
                    <div class="standard-header">
                        <h3>Tables</h3>
                    </div>
                    <table class="table">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="standard-box">
                    <div class="standard-header">
                        <h3>Table striped (hover rows)</h3>
                    </div>
                    <table class="table table-striped table-hover">
                        <thead>
                            <tr>
                                <th>#</th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Username</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>1</td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td>@mdo</td>
                            </tr>
                            <tr>
                                <td>2</td>
                                <td>Jacob</td>
                                <td>Thornton</td>
                                <td>@fat</td>
                            </tr>
                            <tr>
                                <td>3</td>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td>@twitter</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <div class="standard-box">
                    <div class="standard-header">
                        <h3>Alerts</h3>
                    </div>
                    <div class="alert alert-success alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        <strong>Well done!</strong> You successfully read this important alert message.
                    </div>
                    <div class="alert alert-info alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                    </div>
                    <div class="alert alert-warning alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        <strong>Warning!</strong> Better check yourself, you're not looking too good.
                    </div>
                    <div class="alert alert-danger alert-dismissable">
                        <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                        <strong>Oh snap!</strong> Change a few things up and try submitting again.
                    </div>
                </div>
                <div class="standard-box">
                    <div class="standard-header">
                        <h3>Panels</h3>
                    </div>
                    <div class="panel panel-primary">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <span class="panel-title-inner">Panel title</span>
                            </h3>
                        </div>
                        <div class="panel-body-outer">
                            <div class="panel-body">
                                Morbi blandit ipsum non nunc consectetur pellentesque. Quisque ultricies, turpis sed sagittis congue, elit libero tincidunt odio, eu rutrum nunc felis aliquam risus. Phasellus est ipsum, dignissim sit amet ultrices id, feugiat finibus libero. Phasellus fermentum turpis ligula. Donec aliquam elementum enim, eu mattis elit bibendum at. Phasellus feugiat aliquet arcu at vestibulum. Cras tempor lacus nisl, eu interdum ligula iaculis vitae. Sed tempor aliquam sollicitudin. Curabitur lacinia viverra lacus ac fermentum. Etiam lobortis scelerisque elit at fermentum. Vestibulum posuere tempor risus, quis rutrum dolor lobortis non. Aliquam at malesuada augue.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-success">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <span class="panel-title-inner">Panel title</span>
                            </h3>
                        </div>
                        <div class="panel-body-outer">
                            <div class="panel-body">
                                Morbi blandit ipsum non nunc consectetur pellentesque. Quisque ultricies, turpis sed sagittis congue, elit libero tincidunt odio, eu rutrum nunc felis aliquam risus. Phasellus est ipsum, dignissim sit amet ultrices id, feugiat finibus libero. Phasellus fermentum turpis ligula. Donec aliquam elementum enim, eu mattis elit bibendum at. Phasellus feugiat aliquet arcu at vestibulum. Cras tempor lacus nisl, eu interdum ligula iaculis vitae. Sed tempor aliquam sollicitudin. Curabitur lacinia viverra lacus ac fermentum. Etiam lobortis scelerisque elit at fermentum. Vestibulum posuere tempor risus, quis rutrum dolor lobortis non. Aliquam at malesuada augue.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-info">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <span class="panel-title-inner">Panel title</span>
                            </h3>
                        </div>
                        <div class="panel-body-outer">
                            <div class="panel-body">
                                Morbi blandit ipsum non nunc consectetur pellentesque. Quisque ultricies, turpis sed sagittis congue, elit libero tincidunt odio, eu rutrum nunc felis aliquam risus. Phasellus est ipsum, dignissim sit amet ultrices id, feugiat finibus libero. Phasellus fermentum turpis ligula. Donec aliquam elementum enim, eu mattis elit bibendum at. Phasellus feugiat aliquet arcu at vestibulum. Cras tempor lacus nisl, eu interdum ligula iaculis vitae. Sed tempor aliquam sollicitudin. Curabitur lacinia viverra lacus ac fermentum. Etiam lobortis scelerisque elit at fermentum. Vestibulum posuere tempor risus, quis rutrum dolor lobortis non. Aliquam at malesuada augue.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-warning">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <span class="panel-title-inner">Panel title</span>
                            </h3>
                        </div>
                        <div class="panel-body-outer">
                            <div class="panel-body">
                                Morbi blandit ipsum non nunc consectetur pellentesque. Quisque ultricies, turpis sed sagittis congue, elit libero tincidunt odio, eu rutrum nunc felis aliquam risus. Phasellus est ipsum, dignissim sit amet ultrices id, feugiat finibus libero. Phasellus fermentum turpis ligula. Donec aliquam elementum enim, eu mattis elit bibendum at. Phasellus feugiat aliquet arcu at vestibulum. Cras tempor lacus nisl, eu interdum ligula iaculis vitae. Sed tempor aliquam sollicitudin. Curabitur lacinia viverra lacus ac fermentum. Etiam lobortis scelerisque elit at fermentum. Vestibulum posuere tempor risus, quis rutrum dolor lobortis non. Aliquam at malesuada augue.
                            </div>
                        </div>
                    </div>
                    <div class="panel panel-danger">
                        <div class="panel-heading">
                            <h3 class="panel-title">
                                <span class="panel-title-inner">Panel title</span>
                            </h3>
                        </div>
                        <div class="panel-body">
                            Morbi blandit ipsum non nunc consectetur pellentesque. Quisque ultricies, turpis sed sagittis congue, elit libero tincidunt odio, eu rutrum nunc felis aliquam risus. Phasellus est ipsum, dignissim sit amet ultrices id, feugiat finibus libero. Phasellus fermentum turpis ligula. Donec aliquam elementum enim, eu mattis elit bibendum at. Phasellus feugiat aliquet arcu at vestibulum. Cras tempor lacus nisl, eu interdum ligula iaculis vitae. Sed tempor aliquam sollicitudin. Curabitur lacinia viverra lacus ac fermentum. Etiam lobortis scelerisque elit at fermentum. Vestibulum posuere tempor risus, quis rutrum dolor lobortis non. Aliquam at malesuada augue.
                        </div>
                    </div>
                </div>
                <div class="standard-box">
                    <div class="standard-header">
                        <h3>Pagination</h3>
                    </div>
                    <nav class="text-center" aria-label="Page navigation">
                        <ul class="pagination">
                            <li class="prev">
                                <a href="#" aria-label="Previous">
                                    <span aria-hidden="true">&laquo;</span>
                                </a>
                            </li><li>
                                <a href="#">1</a>
                            </li><li class="active">
                                <a href="#">2</a>
                            </li><li>
                                <a href="#">3</a>
                            </li><li>
                                <a href="#">4</a>
                            </li><li>
                                <a href="#">5</a></li>
                            <li class="next">
                                <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block scripts %}
{% endblock %}